import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:fluttermodule/utils/screen.dart';

import 'LearningMaterialsWidget.dart';

/**
 * 课程详情页面
 */
class CourseDetailPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _CourseDetailState();
  }
}

class _CourseDetailState extends State<CourseDetailPage> {
  var _controller;
  var tabs = <Tab>[];

  @override
  void initState() {
    super.initState();
    tabs = <Tab>[
      Tab(
        text: '学习资料',
      ),
      Tab(
        text: '课程选集',
      ),
      Tab(
        text: '课后练习',
      )
    ];
    _controller = TabController(length: tabs.length, vsync: ScrollableState());
  }

  @override
  Widget build(BuildContext context) {
    setScreenSize(context);
    return Scaffold(
      appBar: PreferredSize(
        preferredSize:
            Size.fromHeight(MediaQuery.of(context).size.height * 0.07),
        child: SafeArea(
          top: true,
          child: Offstage(),
        ),
      ),
      body: Container(
        color: Color.fromARGB(255, 240, 240, 240),
        child: Flex(
          direction: Axis.vertical,
          children: <Widget>[
            _player(),
            Container(
              margin: EdgeInsets.only(bottom: dpHeight(10)),
              height: dpHeight(60),
              color: Color.fromARGB(255, 255, 255, 255),
              alignment: Alignment.center,
              child: Text(
                '正在使用数据流量播放,请注意流量消耗~',
                style: TextStyle(color: Color.fromARGB(255, 202, 179, 143)),
              ),
            ),
            Expanded(child: _tableLayout())
          ],
        ),
      ),
    );
  }

  /**
   * 播放器部分
   */
  Widget _player() {
    return Container(
      color: Colors.grey,
      height: dpHeight(400),
      child: Stack(
        children: <Widget>[
          Align(
              alignment: Alignment.topRight,
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Container(
                    child: Image.asset(
                      "assets/university/images/love.png",
                      width: dpWidth(50),
                      height: dpHeight(50),
                    ),
                    margin: EdgeInsets.all(dpWidth(20)),
                  ),
                  Container(
                    child: Image.asset(
                      "assets/university/images/share.png",
                      width: dpWidth(50),
                      height: dpHeight(50),
                    ),
                    margin: EdgeInsets.all(dpWidth(20)),
                  )
                ],
              )),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              color: Colors.black12,
              child: Flex(
                direction: Axis.horizontal,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Expanded(
                    child: Container(
                      margin: EdgeInsets.fromLTRB(
                          dpWidth(20), dpHeight(10), dpWidth(20), dpHeight(10)),
                      child: Image.asset("assets/university/images/pause.png"),
                      width: dpWidth(50),
                      height: dpHeight(50),
                    ),
                    flex: 0,
                  ),
                  Text('00:01:16'),
                  Expanded(
                    flex: 1,
                    child: Padding(
                      padding: EdgeInsets.only(
                          left: dpWidth(20), right: dpWidth(20)),
                      child: Stack(
                        alignment: Alignment.centerLeft,
                        children: <Widget>[
                          Container(
                            height: dpHeight(5),
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius:
                                    BorderRadius.circular(dpHeight(5))),
                          ),
                          Container(
                            height: dpWidth(20),
                            width: dpWidth(20),
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius:
                                    BorderRadius.circular(dpWidth(10))),
                          )
                        ],
                      ),
                    ),
                  ),
                  Text('01:26:41'),
                  Padding(
                    padding:
                        EdgeInsets.only(left: dpWidth(20), right: dpWidth(20)),
                    child: Text('标清'),
                  ),
                  Container(
                    margin: EdgeInsets.fromLTRB(
                        dpWidth(20), dpHeight(10), dpWidth(20), dpHeight(10)),
                    child: Image.asset("assets/university/images/full.png"),
                    width: dpWidth(45),
                    height: dpHeight(45),
                  )
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

  /**
   * tableLayout部分
   */
  Widget _tableLayout() {
    return Flex(
      direction: Axis.vertical,
      children: <Widget>[
        Container(
          child: TabBar(
            tabs: tabs,
            controller: _controller,
            labelColor: Color.fromARGB(255, 199, 172, 129),
            unselectedLabelColor: Colors.black,
            indicator: UnderlineTabIndicator(
                insets: EdgeInsets.only(left: 35, right: 35),
                borderSide: BorderSide(
                    width: 2.0, color: Color.fromARGB(255, 199, 172, 129))),
          ),
          margin: EdgeInsets.only(bottom: dpHeight(1)),
          color: Colors.white,
        ),
        Expanded(
            flex: 1,
            child: Container(
              child: TabBarView(
                controller: _controller,
                physics: PageScrollPhysics(
                  parent: BouncingScrollPhysics(),
                ), //配置控制器
                children: <Widget>[
                  LearningMaterialsWidget(),
                  LearningMaterialsWidget(),
                  LearningMaterialsWidget(),
                ],
              ),
            ))
      ],
    );
  }
}
